iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 21
0
自我挑戰組

輕鬆Vue一下系列 第 21

Day21-v-charts/柱狀圖

  • 分享至 

  • xImage
  •  

柱狀圖

https://ithelp.ithome.com.tw/upload/images/20191006/20112076TcvEtcmYsG.jpg
在生成柱狀圖時,需要在html中建立一個ve-histogram物件:
https://ithelp.ithome.com.tw/upload/images/20191006/201120768GwK6uCO4w.jpg
這裡將會介紹幾種簡單的設定:
1.它透過settings屬性將chartSettings變數綁定,設置顯示的指標。而metrics是用來控制指標;dimension是用來控制維度,結果如下:
https://ithelp.ithome.com.tw/upload/images/20191006/20112076KA1bqQLE50.jpg
https://ithelp.ithome.com.tw/upload/images/20191006/20112076PNazXC70Kk.jpg
2.它透過settings屬性將chartSettings變數綁定,設置堆疊面積圖。而stack是用來控制欲堆疊目標有哪些;在柱狀圖中沒有area屬性,這是跟折線圖不同的地方,結果如下:
https://ithelp.ithome.com.tw/upload/images/20191006/20112076rBLvGcPLHO.jpg
https://ithelp.ithome.com.tw/upload/images/20191006/20112076kXOBFPbuoF.jpg
3.它透過settings屬性將chartSettings變數綁定,同時顯示柱狀圖+折線圖,結果如下:
https://ithelp.ithome.com.tw/upload/images/20191006/20112076iwktctE3Kp.jpg
https://ithelp.ithome.com.tw/upload/images/20191006/20112076kym4TaYTgj.jpg
明日預告:v-charts/條形圖


上一篇
Day20-v-charts/折線圖
下一篇
Day22-v-charts/條形圖
系列文
輕鬆Vue一下30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言